<template>
    <div>
        <iview-table
                ref="table"
                :baseURL="queryModel.baseURL"
                :menuId="dataModel.menuId"
                :columns="dataModel.columns"
                :order="dataModel.order"
                :pageNumber="pageModel.pageNumber"
                :pageSize="pageModel.pageSize"
                :defaultFilters="queryModel.defaultFilters"
                v-on="{changeTotalSize:changeTotalSize,changeSelect:changeSelect}">
        </iview-table>
        <br>
        <iview-page
                style="margin-bottom: 200px"
                :totalSize="pageModel.totalSize"
                :pageNumber="pageModel.pageNumber"
                :pageSize="pageModel.pageSize"
                :pageSizeOpts="pageModel.pageSizeOpts"
                v-on="{changePageNumber:changePageNumber,changePageSize:changePageSize}">
        </iview-page>
        <Modal v-model="showModal" @on-ok="doExecute" ok-text="保存" cancel-text="取消" :closable='false' :mask-closable=true :width="600">
            <p slot="header">
                <span>操作提示</span>
            </p>
            <Row>
                <Col :span="20" :offset="2">
                    <Form :label-width="80">
                        <FormItem v-show="status === 1" label="使用数量：">
                            <InputNumber style="width: 100%" :min="1" v-model="useCount"></InputNumber>
                        </FormItem>
                        <FormItem label="执行备注：">
                            <Input v-model="executeRemark" type="textarea" :rows="10" :autosize="{minRows: 10}" placeholder="请输入执行备注..."></Input>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
    import iviewTable from '@/view/common/table/Table.vue';
    import iviewPage from '@/view/common/page/Page.vue';
    export default {
        components: {
            iviewTable,
            iviewPage
        },
        props: {
        },
        data () {
            return {
                baseURL: '/user/treat/plan/course/product',
                selectRows: [],
                selectRow: {},
                executeRemark: '',
                status: '',
                useCount: '',
                queryModel: {
                    // 网关代理路径(必须)+资源路径(可选)
                    baseURL: '/user/treat/plan/course/product',
                    defaultFilters: [
                        {'field': 'patient_id', 'value1': -1, 'operate': '=='},
                        {'field': 'complaint_id', 'value1': -1, 'operate': '=='}
                    ]
                },
                dataModel: {
                    menuId: -1,
                    columns: [
                        {
                            title: '添加时间',
                            key: 'creationTime',
                            render: (h, params) => {
                                return h('span', this.$moment(params.row.creationTime).format('YYYY年MM月DD日'))
                            }
                        },
                        {
                            title: '产品名称',
                            key: 'productName',
                        },
                        {
                            title: '医嘱',
                            key: 'medicalAdvice',
                            // render: (h, params) => {
                            //     var vm = this
                            //     return h('Input',{
                            //         props: {
                            //             type: 'textarea',
                            //             rows: '2',
                            //             placeholder: '请输入医嘱',
                            //             value: params.row.medicalAdvice
                            //         },
                            //         style: {
                            //             width: '100%',
                            //             margin: '5px 0px 5px 0px'
                            //         },
                            //         on: {
                            //             'on-blur' (event) {
                            //                 if (event.target.value !== params.row.medicalAdvice) {
                            //                     params.row.medicalAdvice = event.target.value
                            //                     vm.save(params.row)
                            //                 }
                            //             }
                            //         }
                            //     });
                            // }
                        },
                        {
                            title: '总数量',
                            key: 'quantity'
                        },
                        {
                            title: '已使用',
                            key: 'execute'
                        },
                        {
                            title: '状态',
                            key: 'status',
                            render: (h, params) => {
                                let color = ''
                                let temp = params.row.status
                                if (temp === 0) {
                                    temp = '进行中'
                                    color = 'green'
                                } else if (temp === 2) {
                                    temp = '已停止'
                                    color = 'red'
                                } else if (temp === 3) {
                                    temp = '已更换'
                                    color = 'yellow'
                                }
                                return h('Tag',{
                                    props: {
                                        type: 'border',
                                        color: color
                                    }
                                }, temp)
                            }
                        },
                        {
                            title: '操作',
                            width: 200,
                            align: 'center',
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'default'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.execute(params.row, 1)
                                            }
                                        }
                                    }, '执行'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'default'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.execute(params.row, 0)
                                            }
                                        }
                                    }, '未执行')
                                ]);
                            }
                        }
                    ],
                    order: 'creation_time desc'
                },
                pageModel: {
                    totalSize: 0,
                    pageNumber: 1,
                    pageSize: 20,
                    pageSizeOpts: [10, 20, 50, 100, 500]
                },
                showModal: false
            };
        },
        methods: {
            save (row) {
                let url = this.baseURL + '/save'
                this.$ajax.post(url, row).then((response) => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.$bus.alert('success', '已保存')
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            },
            execute (row, status) {
                this.useCount = 1
                this.executeRemark = ''
                this.status = status
                this.selectRow = row
                this.showModal = true
            },
            doExecute () {
                if (this.executeRemark.trim() === '') {
                    this.executeRemark = '未填写'
                }
                let url = this.baseURL + '/execute'
                this.$ajax.post(url, {
                    id: this.selectRow.id,
                    status: this.status,
                    execute: this.useCount,
                    content: this.executeRemark
                }).then((response) => {
                    let {code, msg} = response.data
                    if (code === 0) {
                        this.$bus.alert('success', msg)
                        this.refresh()
                    } else {
                        this.$bus.alert('warning', msg)
                    }
                    this.executeRemark = ''
                })
            },
            refresh () {
                this.queryModel.defaultFilters.length = 0
                if (this.$store.state.app.patientId && this.$store.state.app.patientId !== '') {
                    this.queryModel.defaultFilters[0] = {'field': 'patient_id', 'value1': this.$store.state.app.patientId, 'operate': '=='}
                }
                if (this.$store.state.app.complaintId && this.$store.state.app.complaintId !== '') {
                    this.queryModel.defaultFilters[1] = {'field': 'complaint_id', 'value1': this.$store.state.app.complaintId, 'operate': '=='}
                }
                this.$refs.table.refresh()
            },
            changeSelect (rows) {
                this.selectRows = rows
            },
            changeTotalSize (totalSize) {
                this.pageModel.totalSize = totalSize
            },
            changePageNumber (pageNumber) {
                this.pageModel.pageNumber = pageNumber
            },
            changePageSize (pageSize) {
                this.pageModel.pageSize = pageSize
            },
            init () {
                this.refresh()
            }
        },
        mounted () {
            // this.init()
        }
    }
</script>

<style>

</style>
